<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 1380px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }
        #prev_btn,#next_btn{
            width: 60px;
            height: 60px;
            background: rgba(39, 39, 39, .7);
            display: inline-block;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            position: absolute;
            top: 143px;
            left: 15px;
            z-index: 999;
            cursor: pointer;
        }
        #next_btn{
            position: absolute;
            top: 143px;
            left: 1315px;
        }
        #prev_btn img{
            margin: 7px 5px 0 0;
            width: 45px;
            height: 45px;
        }
        #next_btn img{
            margin: 7px 0 0 5px;
            width: 45px;
            height: 45px;
        }
        /* #banner_container{
            width: 600%;
        } */
        .banner_container{
            position: absolute;
            /* transition: all .5s; */
            width: 8280px;
        }
        .banner_container li{
            list-style: none;
            float: left;
            width: 1380px;
            height: 350px;
        }
        .banner_container li img{
            width: 1380px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="container">
        <a id="prev_btn"><img src="./images/zuo-copy.png" /></a>
        <a id="next_btn"><img src="./images/you-copy.png" /></a>
        <ul class="banner_container">
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    function Banner(){
        //获取左按键
        this.prev_btn = document.querySelector('#prev_btn');
        //获取右按键
        this.next_btn = document.querySelector('#next_btn');
        //获取大盒子
        this.slide_container = document.querySelector('.banner_container');
        //获取所有img
        this.slides = this.slide_container.children;
        //设定下表为0
        this.index = 0;
        //调用
        this.bindEvent();

    }
    Banner.prototype.bindEvent = function(){
        var self = this;
        //点击左按键
        this.prev_btn.onclick = function(){
            //if判断点击事件
            if(self.index === 0){
                //为0时再点跳转到倒数第二张
                self.index = self.slides.length - 2
                //设置盒子距left的距离
                self.slide_container.style.left = -(self.slides.length-1 )* 1380 + "px";
            }else{
                self.index --;
            }
            //调用
            self.changeSlide();
        }
        this.next_btn.onclick = function(){
            //最后一张时再点就设定到索引为0
            if(self.index === self.slides.length - 1){
                self.slide_container.style.left = 0;
                self.index = 1;
            }else{
                self.index ++;
            }
            //调用
            self.changeSlide();
        }
    }
    Banner.prototype.changeSlide = function(){
        //stop()设置的意思是不停按按钮让它停顿
        $(this.slide_container).stop()
        .animate({
            left:-this.index*1380
        },800)
    }

    
    new Banner();
</script>
</html>